<template>
<div>
  <button> animation</button>
</div>
  <div class="large centered row title">
    <div class="half col">
    <pre class="large log row">
      <span class="label">current time</span>
      <span class="value lcd">0</span>
    </pre>
    </div>
    <div class="half col">
    <pre class="large log row">
      <span class="label">callback fired</span>
      <span class="value lcd">0</span>
    </pre>
    </div>

<!--    <div class="medium row">
      <fieldset class="controls">
        <button class="play">Play</button>
      </fieldset>
    </div>//确认按钮-->


    <div class="medium row">
      <fieldset class="controls">
        <input type="range" min=0 max=120 value=60 step=1 class="range" />
      </fieldset>
    </div>
  </div><!--进度条拉动(step为每一步最小步长)-->

</template>

<script setup>
import { ref, onMounted } from 'vue';
import {animate, utils, stagger, text, createTimer} from 'animejs';

/*const headingRef = ref(null);*/

onMounted(() => {

  const values = utils.$('.value');
  const [ $playButton ] = utils.$('.play');
  const [ $range ] = utils.$('.range');

  const $time = values[0];
  const $count = values[1];
  const timer = createTimer({
    //autoplay: false,//手动自动打开
    frameRate: 60,
    onUpdate: self => $time.innerHTML = self.currentTime
  });

  const updateFps = () => {
    const { value } = $range;
    $count.innerHTML = value;
    timer.fps = value;
  }



  /*const playTimer = () => timer.play();

  $playButton.addEventListener('click', playTimer);*/
  $range.addEventListener('input', updateFps);

  let loops = 10;

  /*createTimer({
    //delay:2000,//启动延时
    //loopDelay: 750,//每次循环延迟
    //reversed: true,//方向，配合duration iterationCurrentTime使用
    duration: 5000,
    loop: true,
    frameRate: 60,// 定时器的刷新帧率,每秒调用定时器次数
    onUpdate: self => {
      $time.innerHTML = self.currentTime;//iterationCurrentTime 当前循环中已过去的时间
                                         //currentTime 从动画开始已经经过的时间
                                         //_currentIteration 当前经过几次循环（从1开始
      //$time.innerHTML = utils.clamp(self.iterationCurrentTime, 0, 1000);
    },
    /!*onLoop: () => {
      $count.innerHTML = ++loops;
    }*!/
  });*/


});
</script>

<style scoped>
.title{
  color: #eca105;
  padding-top: 10px;
}

</style>
